<!--
 * @Author: tom
 * @Date: 2022-09-08 16:52:42
 * @LastEditors: 阿航
 * @LastEditTime: 2022-10-31 11:14:20
 * @FilePath: \shop\src\views\user\index.vue
-->
<template>
  <el-breadcrumb :separator-icon="ArrowRight" style="padding: 8px">
    <el-breadcrumb-item :to="{path: '/user/index'}"
      >用户列表</el-breadcrumb-item
    >
  </el-breadcrumb>
  <el-form :inline="true" :model="queryParams" class="demo-form-inline">
    <el-form-item label="用户名">
      <el-input v-model="queryParams.userName" placeholder="请输入用户名" />
    </el-form-item>
    <el-form-item label="昵称">
      <el-input v-model="queryParams.nickName" placeholder="请输入昵称" />
    </el-form-item>
    <!-- <el-form-item label="分类">
      <el-select v-model="queryParams.region" placeholder="请选择分类">
        <el-option label="全部" value="" />
        <el-option
          :label="item.name"
          :value="item.id"
          v-for="item in categoryList"
          :key="item.id"
        />
      </el-select>
    </el-form-item> -->
    <el-form-item>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {reactive} from 'vue'
import {ArrowRight} from '@element-plus/icons-vue'
import {getUserList} from '../../api/user'
const queryParams = reactive({
  userName: undefined, // 用户名
  nickName: undefined, // 昵称
  per: 10,
  page: 1,
})

const getList = async () => {
  const res = await getUserList(queryParams)
  console.log(res)
}

const handleQuery = () => {}
getList()
</script>
<style scoped></style>
